<template>
	<view>
		<view class="u-search-box">
			<u-search placeholder="输入名称搜索圈子" v-model="keyword" @change="onSearch" @search="onSearch" :show-action="false"></u-search>
		</view>

		<q-topic-list :list="topicList" :loadStatus="loadStatus"></q-topic-list>
	</view>
</template>

<script>
	let page;
	export default {
		data() {
			return {
				topicList: [],
				loadStatus: "nomore",
				keyword: "",
				page: 1
			};
		},
		onLoad(options) {
			this.keyword = options.keyword;
		},
		onReachBottom() {
			this.page++
			this.getTopicList()
		},
		methods: {
			onSearch() {
				this.page = 1;
				this.topicList = [];
				this.getTopicList();
			},
			getTopicList() {
				this.loadStatus = "loading";
				this.$H.get('topic/list', {
					keyword: this.keyword,
					page: this.page
				}).then(res => {
					this.topicList = this.topicList.concat(res.result.list);
					if (res.result.hasMorePages) {
						this.loadStatus = 'loadmore';
					} else {
						this.loadStatus = 'nomore';
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.u-search-box {
		padding: 30rpx 20rpx;
	}
</style>